<template>
  <div>
    <Component
      v-show="mappingProps.visible"
      ref={refComponent}
      class="t-stepper"
      v-bind="{ ...attrs, ...mappingProps }"
      onClick="onClickHandler"
    >
      <slot></slot>
    </Component>
  </div>
</template>

<script setup>
import Component from '@teld/q-components/Stepper';
import useMappingProps from 't/common/hooks/useMappingProps';
import {
  commonProps
} from 't/common/utils';
import { onMounted, ref, useAttrs } from 'vue';

const refComponent = ref();
const attrs = useAttrs();
const props = defineProps({
  ...commonProps,
  ...Component.props,
  demo: {
    type: String,
    default() {
      return '';
    },
  },
});
const [mappingProps, mappingExpose] = useMappingProps(props);
defineExpose(mappingExpose);
const emit = defineEmits(['click']);
onMounted(() => {});

function onClickHandler(params) {
  emit('click', params);
}
</script>
